<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <div class="content">
            <div class="login-wrapper">
                <div class="mask"></div>
                <div class="login-content">
                    <h1>登 录</h1>
                    <div class="title-text">
                        欢迎来到这个界面，您可以通过这个界面登录到系统，也可以选择其他的登录方式.
                    </div>
                    <div class="other-login">
                        <img src="./asset/QQ.png" alt="">
                        <span>使用QQ登录</span>
                    </div>
                    <div class="login-form">
                        <input type="text" class="user" placeholder="账号">
                        <input type="password" class="password" placeholder="密码">
                    </div>
                    <button class="login-btn">登 录</button>
                    <div class="tips">
                        <span>还没有账号?</span>
                        <span>注册</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    let flag = 0;
    function changeBg() {
        if (flag % 2 == 0)
            document.querySelector('.other-login').style.backgroundColor = 'rgb(248, 182, 217)';
        else
            document.querySelector('.other-login').style.backgroundColor = 'rgb(182, 211, 248)';
        if (flag == 4)
            flag = 1;
        else
            flag++;
        document.querySelector('.content').style.background = `url(./asset/bg${flag}.png) no-repeat`;
        return changeBg
    }
    setInterval(changeBg(), 5000);
</script>

</html>